<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Vue中操作数组</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <button @click="changeName">修改张三的名字</button>
      <button @click="changeAge">修改张三的年龄</button>
      <button @click="changeAll">修改整个张三</button>
      <button @click="changeAll2">修改整个数组</button>
      <ul>
        <li v-for="p in persons" :key="p.id">
          {{p.name}}-{{p.age}}
        </li>
      </ul>
    </div>

    <script type="text/javascript">
      let vm = new Vue({
        el:'#demo',
        data:{
          persons:[
            {id:'asdasd01',name:'张三',age:18},
            {id:'asdasd02',name:'李四',age:20},
            {id:'asdasd03',name:'王五',age:13}
          ],
          a:1,
          b:2,
          c:{e:3}
        },
        methods:{
          changeName(){
            this.persons[0].name = 'zhangsan'
          },
          changeAge(){
            this.persons[0].age = 99
          },
          changeAll(){
            // 下面这行（45行）修改是不起作用的，或者说：这种修改Vue是检测不到的
            // this.persons[0] = {id:'asdasd09',name:'tony',age:69}

            // 下面这行（48行）是起作用的
            this.persons.splice(0,1,{id:'asdasd09',name:'tony',age:69})
            console.log(Array.prototype.splice === this.persons.splice)
          },
          changeAll2(){
            this.persons = [
              {id:'asdasd000001',name:'海峰老师',age:99},
              {id:'asdasd000002',name:'晶哥',age:999},
              {id:'asdasd000003',name:'欣宇',age:9999}
            ]
          }
        }
      })
      console.log(vm)
    </script>
  </body>
</html>